<template>
  <div id="customer">
    <!-- 按钮  -->
    <div class="Top">
    <div class="btns">
      <el-button size="small" type="primary" @click="handleToAdd"
        >新增</el-button
      >
      <el-button size="small" type="danger" @click="handleToDel"
        >批量删除</el-button
      >   
    </div>
    <div style="display:flex">
       <span style="width:170px;line-height:40px;color: cadetblue">输入大棚名称:</span>
       <el-input v-model="customer.name" placeholder="请输入内容" @change='fuQuery'></el-input>
      </div> 
      </div>
    <!-- /按钮 -->
    <!-- 表格 -->
    <el-table
    ref="multipleTable"
    :data="list"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column label="设备类型" prop="type" width="120"> </el-table-column>
    <el-table-column prop="name" label="设备名称" width="120">
    </el-table-column>
    <el-table-column prop="time" label="购入时间" width="120">
    </el-table-column>
    <el-table-column prop="quality" label="质保期限" width="120">
    </el-table-column>
    <el-table-column prop="status" label="设备状态"> </el-table-column>
    <el-table-column prop="price" label="购入价格"> </el-table-column>
    <el-table-column prop="manufacturer" label="厂商"> </el-table-column>
    <el-table-column prop="purpose" width="180" label="主要用途"> </el-table-column>
    <el-table-column  label="操作" width="170">
      <template slot-scope="scope">
        <el-button
          @click="handleToDelete(scope.row.id)"
          type="danger"
          size="small"
          >删除</el-button
        >
         <el-button
          type="primary"
          @click.prevent="handleToEdit(scope.row)"
          size="mini"
          >修改</el-button
        >
      </template>
    </el-table-column>
  </el-table>
    <!-- /表格 -->
    <!-- 模态框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="closeModel"
    >
      <el-form
        label-position="left"
        ref="customerForm"
        :rules="rules"
        label-width="80px"
        :model="customer"
      >
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="customer.name"></el-input>
        </el-form-item>
        <el-form-item label="购入时间" prop="time">
          <el-input v-model="customer.time"></el-input>
        </el-form-item>
        <el-form-item label="质保期限" prop="quality">
          <el-input v-model="customer.quality"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="type">
          <el-select v-model="customer.type" placeholder="请选择">
            <el-option
              v-for="item in type"
              :key="item.id"
              :label="item.type"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="设备状态" prop="status">
          <el-select v-model="customer.status" placeholder="请选择">
            <el-option
              v-for="item in status"
              :key="item.id"
              :label="item.status"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="购入价格" prop="price">
          <el-input v-model="customer.price"></el-input>
        </el-form-item>
        <el-form-item label="厂商" prop="manufacturer">
          <el-input v-model="customer.manufacturer" ></el-input>
        </el-form-item>
         <el-form-item label="主要用途" prop="purpose">
          <el-input v-model="customer.purpose" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click.prevent="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('customerForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- /模态框 -->
    <!-- 分页开始 -->
    <el-pagination
      class="pagination"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="findAllCustomer"
    >
    </el-pagination>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      dialogVisible: false,
      //  list:[{realname:'张三',telephone:'13522213397',idcard:'140621199712223443'},
      //         {realname:'小明',telephone:'13522114408',idcard:'140123299712223443'},
      //         {realname:'杨溟',telephone:'13272213397',idcard:'140621194312223443'},
      //         {realname:'杨溟',telephone:'13272213397',idcard:'140621194398223443'},],
      title: "",
      customer: {},
      ids: [],
      rules: {
        name: [
          { required: true, message: "设备名称不能为空", trigger: "blur" },
          // { min: 2, max: 6, message: "姓名的字数应该是2-6位" },
        ],
        time: [
          { required: true, message: "购入时间不能为空", trigger: "blur" },
          // { min: 2, max: 6, message: "姓名的字数应该是2-6位" },
        ],
        quality: [
          { required: true, message: "质保期限不能为空", trigger: "blur" },
          // { min: 2, max: 6, message: "密码的字数应该是2-6位" },
        ],
        manufacturer: [
          { required: true, message: "厂商不能为空", trigger: "blur" },
          // { min: 11, max: 11, message: "电话号的字数应该是11位" },
          // {type:"number", message:"电话号应该是数字"}
        ],
        price: [
          { required: true, message: "购入价格不能为空",trigger: "blur",},
        ],
         purpose: [
          { required: true, message: "主要用途不能为空",trigger: "blur",},
        ],
      },
    };
  },
  created() {
    this.findAllCustomer();
  },
  computed: {
    ...mapState("comment", [
      "loading",
      "total",
      " message",
      "list",
      "listQuery",
      "type",
      'status',
    ]),
  },
  methods: {
    ...mapActions("comment", {
      findAllCustomer: "findAll",
      openModel: "openModel",
      saveOrUpdateCustomer: "saveOrUpdate",
      deleteCustomerById: "deleteById",
      handleToBatchDel: "handleToBatchDelete",
      fuzzyQuery:'fuzzyQuery'
    }),
    confirmTelephone() {
      if (!/^1[0-9]{10}$/.test(this.waiter_info.telephone))
        this.waiter_info.telephone = "";
    },
    // 模糊查询
    fuQuery(){
        this.fuzzyQuery({page: 1,pageSize:10,name: this.customer.name})
    },
    closeModel() {
      this.dialogVisible = false;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleToAdd() {
      this.dialogVisible = true;
      this.title = "新增大棚信息";
      //重置customer
      this.customer = {};
      //   this.openModel();
    },
    //  获取id
    handleSelectionChange(val) {
      this.ids = val.map((item) => item.id);
    },
    //批量删除
    handleToDel() {
      this.handleToBatchDel(this.ids);
    },
    //删除
    handleToDelete(id) {
      this.deleteCustomerById(id).then(() => {
        this.$notify({
          title: "成功",
          message: this.message,
          type: "success",
        });
      });
    },
    handleToEdit(row) {
      this.title = "修改设备信息";
      //   this.openModel();
      this.dialogVisible = true;
      //对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      // this.$refs.customerForm.resetFields();
      this.customer = row;
    },
    handleSubmit(customerForm,item) {
      //提交之前先去执行校验操作

      // console.log(customerForm,"---------")
      this.$refs[customerForm].validate((valid) => {
        if (valid) {
          //校验通过
          this.customer.id
          this.saveOrUpdateCustomer(this.customer).then((result) => {
            console.log('-----',result)
            this.$notify({
              title: "成功",
              message: this.$store.state.customer.message,
              type: "success",
            });
            this.findAllCustomer();
            this.dialogVisible = false;
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style scoped>
.btns {
  margin-top: 20px;
  margin-left: 10px;
}
#customer {
  padding: 20px;
}
.pagination {
  /* position: absolute; */
  /* bottom: 50px; */
  margin-top: 20px;
  margin-left: 30px;
}
.Top{
  display: flex;
  color: rgb(233, 141, 4);
  justify-content: space-between;
}
</style>